<template>
  <div style="padding:30px;">

    <div class="module-action">
      <el-button type="primary" plain @click="addVisible=true">新增</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%;margin: 0 0 20px;">
      <el-table-column
        prop="name"
        label="角色名称"
        width="140">
      </el-table-column>

      <el-table-column label="操作">
        <!--<template slot-scope="scope">-->
          <!--<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
          <!--<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
        <!--</template>-->
      </el-table-column>
    </el-table>

    <!-- 新增弹出框 -->
    <el-dialog title="新增" :visible.sync="addVisible" width="30%">
      <el-form ref="form" :model="addForm" label-width="100px">
        <el-form-item label="角色名称">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="角色权限">

          <!--{{formatMenu}}-->
          <el-tree :data="data"
                   show-checkbox
                   node-key="id"
                   :highlight-current="true"
                   :props="defaultProps"
                   ref="vuetree"
                   :default-expanded-keys="formatMenu"
                   :default-checked-keys="formatMenu">
          </el-tree>
        </el-form-item>
      </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="addVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveAdd">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getCar } from '@/api/company'
  export default{
    data(){
      return{
        tableData:[
          {
            name:'admin',
            role:[],
          },
          {
            name:'财务',
            role:[],
          }
        ],
        addVisible:false,
        addForm:{

        },
        groupMenu:[
          {
            id:1,
            label: '公司信息',
            children: [{
              label: '公司列表',
              id:2,
            },{
              label: '公司车辆',
              id:3,
            },]
          },{
            label: '派工管理',
            id:4,
            children: [{
              label: '派派预约',
              id:5,
            },]
          }
        ],
        data: [
          {
            id:1,
            label: '公司信息',
            children: [{
              label: '公司列表',
              id:2,
            },{
              label: '公司车辆',
              id:3,
            },]
          },{
            label: '派工管理',
            id:4,
            children: [{
              label: '派派预约',
              id:5,
            },{
              label: '服务工单',
              id:6,
            },]
          },],
        selectMenuData:[],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },

    mounted(){},
    computed:{
      formatMenu () {
        let temp = []
        function fn (menu) {
          console.log(menu,123)
          for (let i = 0; i < menu.length; i++) {
            if(menu[i].children && menu[i].children.length) {
              fn(menu[i].children)
            } else {
              temp.push(menu[i].id)
            }
          }
        }
        fn(this.groupMenu)
        return temp
      },
    },
    methods:{

      selectMenu(dataAttr,idAttr){

        for(var i=0;i<dataAttr.length;i++){
          if(idAttr.indexOf(dataAttr[i].id)>-1){
            for(var j=0;j<dataAttr[i].children.length;j++){
              if(idAttr.indexOf(dataAttr[i].children[j].id)<=-1){
                dataAttr[i].children.splice(j,1)
              }
            }
          }else{
            dataAttr.splice(i,1)
          }
        }

        this.selectMenuData=dataAttr

        console.log(this.selectMenuData,111)
      },
      saveAdd(){
        let selectIdAttr = this.$refs.vuetree.getCheckedKeys().concat(this.$refs.vuetree.getHalfCheckedKeys());
        var handleAttr= JSON.parse(JSON.stringify(this.data));
        this.selectMenu(handleAttr,selectIdAttr)
      },
    }
  }
</script>
<style>
  .total{
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    color: #666;
  }

  .module-action{
    padding:0 0 18px;
  }
  .module-action .el-button{
    padding:10px;
    font-size: 13px;
  }
  .module-action .el-button i{
    font-size: 16px;
  }
  .el-tree-node__content .el-tree-node__label{
    font-size: 15px;
  }
  .el-tree-node__children .el-tree-node__content .el-tree-node__label{
    font-size: 14px;
    color: #888;
  }

</style>
